<template>
  <div class="order-list-simple">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>订单表（线下团购核销版）</h2>
    </div>

    <!-- 订单列表表格 -->
    <el-card shadow="hover">
      <el-table
          :data="tableData"
          border
          stripe
          :loading="loading"
          style="width: 100%"
      >
        <el-table-column
            prop="id"
            label="订单编号"
            min-width="180"
        />
        <el-table-column
            prop="userId"
            label="用户编号"
            width="120"
            align="center"
        />
        <el-table-column
            prop="merchantId"
            label="商户编号"
            width="120"
            align="center"
        />
        <el-table-column
            prop="groupBuyId"
            label="团购编号"
            width="120"
            align="center"
            :formatter="formatNullValue"
        />
        <el-table-column
            prop="couponId"
            label="优惠券编号"
            width="120"
            align="center"
            :formatter="formatNullValue"
        />
        <el-table-column
            prop="totalAmount"
            label="订单总金额(元)"
            width="150"
            align="center"
            :formatter="formatCurrency"
        />
        <el-table-column
            prop="verifyCode"
            label="核销码"
            width="160"
            align="center"
        />
        <el-table-column
            prop="verifyStatus"
            label="核销状态"
            width="120"
            align="center"
        >
          <template #default="scope">
            <el-tag
                :type="scope.row.verifyStatus === 1 ? 'success' : 'warning'"
            >
              {{ getVerifyStatusName(scope.row.verifyStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="订单状态"
            width="120"
            align="center"
        >
          <template #default="scope">
            <el-tag
                :type="getStatusType(scope.row.status)"
            >
              {{ getStatusName(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="orderTime"
            label="下单时间"
            width="180"
            align="center"
            :formatter="formatDateTime"
        />
        <el-table-column
            prop="verifyTime"
            label="核销时间"
            width="180"
            align="center"
            :formatter="formatDateTimeOrNull"
        />
        <el-table-column
            prop="cancelTime"
            label="取消时间"
            width="180"
            align="center"
            :formatter="formatDateTimeOrNull"
        />
        <el-table-column
            label="操作"
            width="120"
            align="center"
        >
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                @click="handleViewDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import server from "../utils/request.js";

// 表格数据
const tableData = ref([]);
// 加载状态
const loading = ref(false);

// 页面加载时获取数据
onMounted(() => {
  fetchOrderList();
});

// 获取订单列表数据
const fetchOrderList =async () => {
  loading.value = true;
  let {data:data} = await server.get("api/orders")
  if (data.code==200){
    Object.assign(tableData.value,data.data);
    console.log(tableData.value)
    loading.value=false
  }
};

// 格式化日期时间
const formatDateTime = (row, column, cellValue) => {
  if (!cellValue) return '-';
  const date = new Date(cellValue);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '-');
};

// 格式化日期时间（空值处理）
const formatDateTimeOrNull = (row, column, cellValue) => {
  return cellValue ? formatDateTime(row, column, cellValue) : '-';
};

// 格式化金额
const formatCurrency = (row, column, cellValue) => {
  return `¥ ${cellValue}`;
};

// 空值格式化
const formatNullValue = (row, column, cellValue) => {
  return cellValue ?? '-';
};

// 获取核销状态名称
const getVerifyStatusName = (status) => {
  const statusMap = {
    0: '未核销',
    1: '已核销'
  };
  return statusMap[status] || '未知';
};

// 获取订单状态名称
const getStatusName = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已取消',
    3: '已完成',
    4: '已退款'
  };
  return statusMap[status] || '未知';
};

// 获取订单状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',   // 待支付-警告
    1: 'primary',   // 已支付-主要
    2: 'info',      // 已取消-信息
    3: 'success',   // 已完成-成功
    4: 'danger'     // 已退款-危险
  };
  return typeMap[status] || 'default';
};

// 查看详情
const handleViewDetail = (row) => {
  ElMessage.info(`查看订单 ${row.id} 的详情`);
  // 实际项目中可跳转到详情页
  // router.push({ path: '/order/detail', query: { id: row.id } });
};
</script>

<style scoped>
.order-list-simple {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}
</style>